<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-hemisu.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-hemisu.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-hemisu.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="读书笔记,js高程,">










<meta name="description" content="[TOC] 本章内容 梳理事件流 使用事件处理程序 不同的事件类型  JavaScript与HTML之间的交互是通过事件实现的。 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件。">
<meta name="keywords" content="读书笔记,js高程">
<meta property="og:type" content="article">
<meta property="og:title" content="js高程读书笔记 第13章 事件">
<meta property="og:url" content="http://www.hemisu.com/2017/08/17/302/index.html">
<meta property="og:site_name" content="何米酥`s Blog">
<meta property="og:description" content="[TOC] 本章内容 梳理事件流 使用事件处理程序 不同的事件类型  JavaScript与HTML之间的交互是通过事件实现的。 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2017-08-17T21:06:26.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="js高程读书笔记 第13章 事件">
<meta name="twitter:description" content="[TOC] 本章内容 梳理事件流 使用事件处理程序 不同的事件类型  JavaScript与HTML之间的交互是通过事件实现的。 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件。">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":true,"scrollpercent":true,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://www.hemisu.com/2017/08/17/302/">





  <title>js高程读书笔记 第13章 事件 | 何米酥`s Blog</title>
  








  <!-- Hotjar Tracking Code for www.hemisu.com -->
  <script>
      (function(h,o,t,j,a,r){
          h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
          h._hjSettings={hjid:1933736,hjsv:6};
          a=o.getElementsByTagName('head')[0];
          r=o.createElement('script');r.async=1;
          r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
          a.appendChild(r);
      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  </script>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">何米酥`s Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">EFE</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2017/08/17/302/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">js高程读书笔记 第13章 事件</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-17T21:06:26+00:00">
                2017-08-17
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/笔记/" itemprop="url" rel="index">
                    <span itemprop="name">笔记</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>[TOC]</p>
<h1 id="本章内容"><a href="#本章内容" class="headerlink" title="本章内容"></a>本章内容</h1><ul>
<li>梳理事件流</li>
<li>使用事件处理程序</li>
<li>不同的事件类型</li>
</ul>
<p>JavaScript与HTML之间的交互是通过<strong>事件</strong>实现的。</p>
<p>事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件。<br><a id="more"></a></p>
<h1 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h1><h2 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h2><p>IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。</p>
<p>IE5.5冒泡会跳过html元素，现代浏览器会冒泡到windows对象<br>。</p>
<h2 id="事件捕获"><a href="#事件捕获" class="headerlink" title="事件捕获"></a>事件捕获</h2><p>DOM2级事件 规范要求事件应该从document对象开始传播，现代浏览器一般从window对象开始捕获事件。</p>
<h2 id="DOM事件流"><a href="#DOM事件流" class="headerlink" title="DOM事件流"></a>DOM事件流</h2><p>事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。</p>
<h1 id="事件处理程序"><a href="#事件处理程序" class="headerlink" title="事件处理程序"></a>事件处理程序</h1><p>事件就是用户或浏览器自身执行的某种动作。click、load和mouseover都是事件的名字。事件处理程序的名字以“on”开头。</p>
<p>响应某个事件的函数就叫做事件处理程序（事件侦听器）</p>
<h2 id="HTML事件处理程序"><a href="#HTML事件处理程序" class="headerlink" title="HTML事件处理程序"></a>HTML事件处理程序</h2><p>某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特征来指定。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">showMessage</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">"Hello World!"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"Click Me"</span> <span class="attr">onclick</span>=<span class="string">"showMessage()"</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p>事件处理程序中的代码在执行时，有权访问全局作用域。</p>
<p>用这种方式会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，也就是事件对象。</p>
<p>通过event变量，可以直接访问时间对象。</p>
<p>在这个函数内部，this值等于事件的目标元素。<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"Click Me"</span> <span class="attr">onclick</span>=<span class="string">"alert(this.value)"</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>可以在函数内部使用with拓展作用域。</p>
<p>HTML中指定事件处理程序有两个缺点。</p>
<ul>
<li>存在时差问题。未加载函数就按下按钮 解决方法：用try…catch…捕获错误</li>
<li>作用域链在不同浏览器中不同</li>
</ul>
<h2 id="DOM0级事件处理程序"><a href="#DOM0级事件处理程序" class="headerlink" title="DOM0级事件处理程序"></a>DOM0级事件处理程序</h2><p>将一个函数赋值给一个事件处理程序属性。</p>
<p>使用DOM0级方法指定的事件处理程序被认为是元素的方法。事件处理程序是在元素的作用域中进行，程序中的this引用当前元素。这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。</p>
<h2 id="DOM2级事件处理程序"><a href="#DOM2级事件处理程序" class="headerlink" title="DOM2级事件处理程序"></a>DOM2级事件处理程序</h2><p>addEventListener()和removeEventListener()</p>
<p>接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">   alert(<span class="keyword">this</span>.id); </span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
<p>使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。</p>
<h2 id="IE事件处理程序"><a href="#IE事件处理程序" class="headerlink" title="IE事件处理程序"></a>IE事件处理程序</h2><p>attachEvent()和detachEvent()接收两个参数：事件处理程序名称与事件处理程序函数。</p>
<p>通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.attachEvent(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">   alert(<span class="string">"Clicked"</span>); </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>attachEvent与使用DOM0级的方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window</p>
<h2 id="跨浏览器的事件处理程序"><a href="#跨浏览器的事件处理程序" class="headerlink" title="跨浏览器的事件处理程序"></a>跨浏览器的事件处理程序</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> EventUtil = &#123;</span><br><span class="line"></span><br><span class="line">    addHandler: <span class="function"><span class="keyword">function</span>(<span class="params">element, type, handler</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (element.addEventListener)&#123;</span><br><span class="line">            element.addEventListener(type, handler, <span class="literal">false</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (element.attachEvent)&#123;</span><br><span class="line">            element.attachEvent(<span class="string">"on"</span> + type, handler);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            element[<span class="string">"on"</span> + type] = handler;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    </span><br><span class="line">    removeHandler: <span class="function"><span class="keyword">function</span>(<span class="params">element, type, handler</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (element.removeEventListener)&#123;</span><br><span class="line">            element.removeEventListener(type, handler, <span class="literal">false</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (element.detachEvent)&#123;</span><br><span class="line">            element.detachEvent(<span class="string">"on"</span> + type, handler);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            element[<span class="string">"on"</span> + type] = <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h1 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h1><p>要阻止特定事件的默认行为，可以使用preventDefault()方法。</p>
<p>stopPropagation()方法用于立即停止事件处理程序在DOM层次中传播</p>
<p>事件对象的eventPhase属性，可以用来确定事件当前正位于事件流的哪个阶段。如果在捕获阶段调用的事件处理程序，那么等于1；如果事件处理程序处于目标对象上，则eventPhase等于2；如果是在冒泡阶段调用的事件处理程序，eventPhase等于3。</p>
<h2 id="IE中的事件对象"><a href="#IE中的事件对象" class="headerlink" title="IE中的事件对象"></a>IE中的事件对象</h2><p>访问DOM中的even对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。</p>
<p>在使用DOM0级方法添加事件处理程序时，event对象，event对象作为window对象的一个属性存在。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> event = <span class="built_in">window</span>.event;</span><br><span class="line">    <span class="built_in">console</span>.log(event.type);<span class="comment">//click</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="跨浏览器的事件对象"><a href="#跨浏览器的事件对象" class="headerlink" title="跨浏览器的事件对象"></a>跨浏览器的事件对象</h2><p>这一节介绍了EventUtil.js的对象增强，以适应不同浏览器对事件的操作。</p>
<h1 id="事件类型"><a href="#事件类型" class="headerlink" title="事件类型"></a>事件类型</h1><ul>
<li>ui事件</li>
<li>焦点事件</li>
<li>鼠标事件</li>
<li>滚轮事件</li>
<li>文本事件</li>
<li>键盘事件</li>
<li>合成事件</li>
<li>变动事件 底层DOM结构发生变化</li>
</ul>
<h2 id="UI事件"><a href="#UI事件" class="headerlink" title="UI事件"></a>UI事件</h2><ol>
<li>load事件</li>
<li>unload事件 文档被完全卸载后或者从从一个页面切换到另外一个页面就会发生</li>
<li>resize事件</li>
<li>scroll事件</li>
</ol>
<h2 id="焦点事件"><a href="#焦点事件" class="headerlink" title="焦点事件"></a>焦点事件</h2><p>当焦点从页面中个一个元素移动到另一个元素，会依次触发下列事件：</p>
<ol>
<li>focusout</li>
<li>focusin</li>
<li>blur</li>
<li>DOMFocusOut</li>
<li>focus</li>
<li>DOMFocusIn</li>
</ol>
<h2 id="鼠标与滚轮事件"><a href="#鼠标与滚轮事件" class="headerlink" title="鼠标与滚轮事件"></a>鼠标与滚轮事件</h2><p>click： 用户单机主鼠标按钮或者按下回车键触发</p>
<p>dblclick： 拥护双击主鼠标按钮时触发</p>
<p>mousedown： 在用户按下了任意鼠标按钮时触发。</p>
<p>mouseenter：在鼠标光标从元素外部首次移动到了元素范围内触发。</p>
<p>mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。</p>
<p>mousemove： 当鼠标指针在元素内部移动时重复地触发。</p>
<p>mouseout： 在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。</p>
<p>mouseover： 在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内触发</p>
<p>mouseup： 在用户释放鼠标按钮时触发</p>
<p>只有在一个元素上相继触发mousedown和mouseup事件，才回触发click事件；如果mousedown或者mouseup事件中一个被取消，就不会触发click事件。类似的只有触发两次click事件才会触发一次dbclick事件。这4个事件触发的顺序始终如下：</p>
<ol>
<li>mousedown</li>
<li>mouseup</li>
<li>click</li>
<li>mousedown</li>
<li>mouseup</li>
<li>click</li>
</ol>
<p>在IE8及之前有个小bug，会跳过第二个mousedown和click事件</p>
<p>鼠标事件中还有一类滚轮事件mousewheel。</p>
<h3 id="客户区坐标位置"><a href="#客户区坐标位置" class="headerlink" title="客户区坐标位置"></a>客户区坐标位置</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myDiv"</span> <span class="attr">style</span>=<span class="string">"background-color:red;height:100px;width:100px"</span>&gt;</span>Click me<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</span><br><span class="line">EventUtil.addHandler(div, <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    event = EventUtil.getEvent(event);</span><br><span class="line">    alert(<span class="string">"Client coordinates: "</span> + event.clientX + <span class="string">","</span> + event.clientY);        </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="页面坐标位置"><a href="#页面坐标位置" class="headerlink" title="页面坐标位置"></a>页面坐标位置</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myDiv"</span> <span class="attr">style</span>=<span class="string">"background-color:red;height:10000px;width:100px"</span>&gt;</span>Click me<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p> document.body（混杂模式） document.documentElement（标准模式）<br> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</span><br><span class="line">EventUtil.addHandler(div, <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    event = EventUtil.getEvent(event);</span><br><span class="line">    <span class="keyword">var</span> pageX = event.pageX,</span><br><span class="line">        pageY = event.pageY;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (pageX === <span class="literal">undefined</span>)&#123;</span><br><span class="line">        pageX = event.clientX + (<span class="built_in">document</span>.body.scrollLeft || <span class="built_in">document</span>.documentElement.scrollLeft);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (pageY === <span class="literal">undefined</span>)&#123;</span><br><span class="line">        pageY = event.clientY + (<span class="built_in">document</span>.body.scrollTop || <span class="built_in">document</span>.documentElement.scrollTop);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    alert(<span class="string">"Page coordinates: "</span> + event.pageX + <span class="string">"|"</span> + pageX + <span class="string">","</span> + event.pageY + <span class="string">"|"</span>+pageY);        </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<h3 id="屏幕坐标位置"><a href="#屏幕坐标位置" class="headerlink" title="屏幕坐标位置"></a>屏幕坐标位置</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myDiv"</span> <span class="attr">style</span>=<span class="string">"background-color:red;height:100px;width:100px"</span>&gt;</span>Click me<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</span><br><span class="line">EventUtil.addHandler(div, <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    event = EventUtil.getEvent(event);</span><br><span class="line">    alert(<span class="string">"Screen coordinates: "</span> + event.screenX + <span class="string">","</span> + event.screenY);        </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="修改键"><a href="#修改键" class="headerlink" title="修改键"></a>修改键</h2><p>shift、ctrl、alt和meta（windows下是windows键，苹果中是cmd键）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myDiv"</span> <span class="attr">style</span>=<span class="string">"background-color:red;height:100px;width:100px"</span>&gt;</span>Click me while holding a modifier key<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</span><br><span class="line">EventUtil.addHandler(div, <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    event = EventUtil.getEvent(event);</span><br><span class="line">    <span class="keyword">var</span> keys = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (event.shiftKey)&#123;</span><br><span class="line">        keys.push(<span class="string">"shift"</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (event.ctrlKey)&#123;</span><br><span class="line">        keys.push(<span class="string">"ctrl"</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (event.altKey)&#123;</span><br><span class="line">        keys.push(<span class="string">"alt"</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (event.metaKey)&#123;</span><br><span class="line">        keys.push(<span class="string">"meta"</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    alert(<span class="string">"Keys: "</span> + keys.join(<span class="string">","</span>));</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="相关元素"><a href="#相关元素" class="headerlink" title="相关元素"></a>相关元素</h3><p>对于mouseover事件，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。</p>
<p>对于mouseout事件，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myDiv"</span> <span class="attr">style</span>=<span class="string">"background-color:red;height:100px;width:100px"</span>&gt;</span>Move the mouse from here to the white<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>EventUtil中部分代码<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">getRelatedTarget: <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (event.relatedTarget)&#123;</span><br><span class="line">            <span class="keyword">return</span> event.relatedTarget;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (event.toElement)&#123;</span><br><span class="line">            <span class="keyword">return</span> event.toElement;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (event.fromElement)&#123;</span><br><span class="line">            <span class="keyword">return</span> event.fromElement;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    </span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</span><br><span class="line">EventUtil.addHandler(div, <span class="string">"mouseout"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    event = EventUtil.getEvent(event);</span><br><span class="line">    <span class="keyword">var</span> target = EventUtil.getTarget(event);</span><br><span class="line">    <span class="keyword">var</span> relatedTarget = EventUtil.getRelatedTarget(event);</span><br><span class="line">    alert(<span class="string">"Moused out of "</span> + target.tagName + <span class="string">" to "</span> + relatedTarget.tagName);        </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="鼠标按钮"><a href="#鼠标按钮" class="headerlink" title="鼠标按钮"></a>鼠标按钮</h3><p>对于mousedown和mouseup事件，在其event对象存在一个button属性，表示按下或释放的按钮。</p>
<p>DOM的button属性可能有如下三个值：0表示主鼠标按钮，1表示中间的按钮，2表示次鼠标按钮。</p>
<p>IE8及之前版本也提供了button属性，但属性的值与DOM的button属性有很大差异。</p>
<p>EventUtil中部分代码<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">getButton: <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">document</span>.implementation.hasFeature(<span class="string">"MouseEvents"</span>, <span class="string">"2.0"</span>))&#123;</span><br><span class="line">        <span class="keyword">return</span> event.button;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">switch</span>(event.button)&#123;</span><br><span class="line">            <span class="keyword">case</span> <span class="number">0</span>:<span class="comment">//表示没有按下按钮</span></span><br><span class="line">            <span class="keyword">case</span> <span class="number">1</span>:<span class="comment">//主按钮</span></span><br><span class="line">            <span class="keyword">case</span> <span class="number">3</span>:<span class="comment">//同时按下主、次按钮</span></span><br><span class="line">            <span class="keyword">case</span> <span class="number">5</span>:<span class="comment">//同时按下主鼠标和中间的鼠标按钮</span></span><br><span class="line">            <span class="keyword">case</span> <span class="number">7</span>:<span class="comment">//同时按下三个按钮</span></span><br><span class="line">                <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">            <span class="keyword">case</span> <span class="number">2</span>:<span class="comment">//按下次鼠标按钮</span></span><br><span class="line">            <span class="keyword">case</span> <span class="number">6</span>:<span class="comment">//同时按下次鼠标和中间鼠标按钮</span></span><br><span class="line">                <span class="keyword">return</span> <span class="number">2</span>;</span><br><span class="line">            <span class="keyword">case</span> <span class="number">4</span>: <span class="keyword">return</span> <span class="number">1</span>;<span class="comment">//按下了中间鼠标按钮</span></span><br><span class="line">        &#125;<span class="comment">//以上代码表示把主按钮优先级调到最高，次按钮其次，中间按钮最后</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure></p>
<h3 id="更多的事件信息"><a href="#更多的事件信息" class="headerlink" title="更多的事件信息"></a>更多的事件信息</h3><p>event对象中还提供了detail属性，在同一个元素上相继发生一次mousedown和mouseup事件算作一次单机。如果鼠标在mousedown和mouseup之间移动了位置，则detail会被重置。</p>
<h3 id="鼠标滚轮事件"><a href="#鼠标滚轮事件" class="headerlink" title="鼠标滚轮事件"></a>鼠标滚轮事件</h3><p>P376</p>
<h3 id="触摸设备"><a href="#触摸设备" class="headerlink" title="触摸设备"></a>触摸设备</h3><ul>
<li>不支持dblclick事件</li>
<li>轻击可单击元素会触发mousemove事件。</li>
<li>mousemove事件也会触发mouseover和mouseout事件。</li>
<li>两个手指放在频幕上且页面随手指滚动而滚动时会触发mousewheel和scroll事件</li>
</ul>
<h2 id="键盘与文本事件"><a href="#键盘与文本事件" class="headerlink" title="键盘与文本事件"></a>键盘与文本事件</h2><p>用户按了一下键盘上的字符键时，首先会触发keydown事件，然后紧跟着是keypress事件，最后会触发keyup事件。如果用户按着字符键不放，会重复触发keydown和keypress事件，直到用户松开该键为止。</p>
<p>如果按下的是非字符键，首先会触发keydown事件，然后是keyup事件。如果按住这个非字符键不放，就会一直触发keydown事件直到用户松开这个键。</p>
<ol>
<li>键码</li>
</ol>
<p>event对象的keyCode属性会报刊一个代码，与键盘上一个特定的键对应。键值与ASCIII对应</p>
<ol start="2">
<li>字符编码</li>
</ol>
<p>现代浏览器使用charCode，只有使用keypress事件时才会包含值</p>
<ol start="3">
<li>DOM3级变化</li>
</ol>
<p>key和char</p>
<p>keyIdentifier 返回U+0000这类字符串</p>
<p>location属性，0表示默认键盘，1表示左侧键盘，2表示右侧位置，3表示数字小键盘，4表示移动设备键盘，5表示手柄。在IE9中支持。Safari和Chrome中支持名为keyLocation的等价属性。</p>
<ol start="4">
<li>textInput事件<br>这个用于替代keypress的textInput事件的行为稍有不同。区别之一就是任何可以获得焦点的元素都可以出发keypress事件，但只有可编辑区域才能出发textInput事件。区别之二是textInput事件只会在用户按下能够输入实际字符的键时才会被触发，而keypress事件则是那些能影响文本显示的键时也会触发。</li>
</ol>
<p>textInput事件主要考虑的是字符，它的event对象中还包含一个data属性，这个属性的值就是用户输入的字符。</p>
<p>event对象上还有一个属性，叫inputMethod，表示把文本输入到文本框中的方式。<br>如1表示键盘输入的，2表示粘贴进来，3表示拖放进来等等。。</p>
<h2 id="复合事件"><a href="#复合事件" class="headerlink" title="复合事件"></a>复合事件</h2><h2 id="变动事件"><a href="#变动事件" class="headerlink" title="变动事件"></a>变动事件</h2><ul>
<li>DOMSubtreeModified: 在DOM结构中发生任何变化时触发。</li>
<li>DOMNodeInserted: 在一个节点作为子节点被被插入到另一个节点中时触发。</li>
<li>DOMNodeRemoved: 在节点从其父节点中被移除时触发</li>
<li>DOMNodeInsertedIntoDocument: 在一个节点被直接插入文档或通过子树间接插入文档之后</li>
<li>DOMNodeRemovedFromDocument: 在一个节点被直接从文档中移除或者通过子树间接从文档中移除之前触发。</li>
<li>DOMAttrModified: 在特性被修改后触发</li>
<li>DOMCharacterDataModified: 在文本节点的值发生变化时触发</li>
</ul>
<h3 id="删除节点"><a href="#删除节点" class="headerlink" title="删除节点"></a>删除节点</h3><p>使用removeChild()或replaceChild()从DOM中删除节点时，首先会触发DOMNodeRemoved事件。</p>
<p>如果被移除的节点包含子节点，那么在其所有子节点以及这个被移除的节点上会相继触发DOMNodeRemovedFrom事件，不过该事件不会冒泡，只有直接指定给其中一个子节点的事件处理程序才会被调用。</p>
<p>紧随其后触发的是DOMSubtreeModified事件。这个事件的目标是被移除节点的父节点。</p>
<h3 id="插入节点"><a href="#插入节点" class="headerlink" title="插入节点"></a>插入节点</h3><p>使用appendChild()、replaceChild()或insertBefore()向DOM插入节点时，首先会触发DOMNodeInserted事件。</p>
<p>紧接着会触发DOMNodeInsertedIntoDocument事件，不冒泡。</p>
<p>最后是DOMSubteeModified，触发于新插入节点的父节点。</p>
<h3 id="HTML5事件"><a href="#HTML5事件" class="headerlink" title="HTML5事件"></a>HTML5事件</h3><ol>
<li>contextmenu事件</li>
</ol>
<p>用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。事件冒泡。</p>
<p>在兼容DOM的浏览器中，使用event.preventDefalut();取消默认事件<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myDiv"</span>&gt;</span>Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"myMenu"</span> <span class="attr">style</span>=<span class="string">"position:absolute;visibility:hidden;background-color:silver"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.nczonline.net"</span>&gt;</span>Nicholas' site<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.wrox.com"</span>&gt;</span>Wrox site<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.yahoo.com"</span>&gt;</span>Yahoo!<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"load"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> div = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</span><br><span class="line">                </span><br><span class="line">    EventUtil.addHandler(div, <span class="string">"contextmenu"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        event = EventUtil.getEvent(event);</span><br><span class="line">        EventUtil.preventDefault(event);</span><br><span class="line">        </span><br><span class="line">        <span class="keyword">var</span> menu = <span class="built_in">document</span>.getElementById(<span class="string">"myMenu"</span>);</span><br><span class="line">        menu.style.left = event.clientX + <span class="string">"px"</span>;</span><br><span class="line">        menu.style.top = event.clientY + <span class="string">"px"</span>;</span><br><span class="line">        menu.style.visibility = <span class="string">"visible"</span>;</span><br><span class="line">    &#125;);</span><br><span class="line">    </span><br><span class="line">    EventUtil.addHandler(<span class="built_in">document</span>, <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">document</span>.getElementById(<span class="string">"myMenu"</span>).style.visibility = <span class="string">"hidden"</span>;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>beforeunload事件<br>会在卸载页面的时候触发</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"myDiv"</span>&gt;</span>Try to navigate away from this page.<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"beforeunload"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    event = EventUtil.getEvent(event);</span><br><span class="line">    <span class="keyword">var</span> message = <span class="string">"I'm really going to miss you if you go."</span>;</span><br><span class="line">    event.returnValue = message;</span><br><span class="line">    <span class="keyword">return</span> message;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>测试了一下chrome好像不能自定义消息。</p>
<ol start="3">
<li>DOMContentLoaded事件<br>window的load事件会在页面中的一切都加载完毕后触发</li>
</ol>
<p>DOMContentLoaded则在形成完整的DOM树后就会触发。不会理会图像、JavaScript文件和CSS文件或者其他资源是否已经下载完毕。</p>
<ol start="4">
<li>readystatechange事件<br>支持readystatechange事件的每个对象都有一个readyState属性。</li>
</ol>
<ul>
<li>uninitialized: 对象存在但未初始化</li>
<li>loading: 对象正在加载数据</li>
<li>loaded: 对象加载数据完成</li>
<li>interactive: 可以操作对象，但还没有完全加载</li>
<li>complete: 对象已经加载完毕</li>
</ul>
<p>外部资源较多时会在load事件触发之前进入交互阶段；而在包含较少或较少的外部资源的页面中，很难说readystatechange事件会发生在load事件前面。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"load"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        </span><br><span class="line">    <span class="comment">//create a new &lt;script/&gt; element.</span></span><br><span class="line">    <span class="keyword">var</span> script = <span class="built_in">document</span>.createElement(<span class="string">"script"</span>);</span><br><span class="line">    EventUtil.addHandler(script, <span class="string">"readystatechange"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        event = EventUtil.getEvent(event);</span><br><span class="line">        <span class="keyword">var</span> target = EventUtil.getTarget(event);</span><br><span class="line">        <span class="keyword">if</span> (target.readyState == <span class="string">"loaded"</span> || target.readyState == <span class="string">"complete"</span>)&#123;<span class="comment">//防止被执行两次</span></span><br><span class="line">            EventUtil.removeHandler(target, <span class="string">"readystatechange"</span>, <span class="built_in">arguments</span>.callee);</span><br><span class="line">            alert(<span class="string">"Script Loaded"</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    script.src = <span class="string">"example.js"</span>;</span><br><span class="line">    <span class="built_in">document</span>.body.appendChild(script);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//create a new &lt;link/&gt; element</span></span><br><span class="line">    <span class="keyword">var</span> link = <span class="built_in">document</span>.createElement(<span class="string">"link"</span>);</span><br><span class="line">    link.type = <span class="string">"text/css"</span>;</span><br><span class="line">    link.rel= <span class="string">"stylesheet"</span>;</span><br><span class="line">    </span><br><span class="line">    EventUtil.addHandler(link, <span class="string">"readystatechange"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        event = EventUtil.getEvent(event);</span><br><span class="line">        <span class="keyword">var</span> target = EventUtil.getTarget(event);</span><br><span class="line">        <span class="keyword">if</span> (target.readyState == <span class="string">"loaded"</span> || target.readyState == <span class="string">"complete"</span>)&#123;<span class="comment">//防止被执行两次</span></span><br><span class="line">            EventUtil.removeHandler(target, <span class="string">"readystatechange"</span>, <span class="built_in">arguments</span>.callee);</span><br><span class="line">            alert(<span class="string">"CSS Loaded"</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    link.href = <span class="string">"example.css"</span>;</span><br><span class="line">    <span class="built_in">document</span>.getElementsByTagName(<span class="string">"head"</span>)[<span class="number">0</span>].appendChild(link);</span><br><span class="line">    </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="5">
<li>pageshow和pagehide事件</li>
</ol>
<p>firefox和opera有一个往返缓存，可以在用户使用浏览器的后退和前进按钮时加快页面的转换速度。</p>
<p>pageshow事件在页面显示时触发。pageshow事件还有一个persisted属性，如果页面被保存在bfcache中，则这个属性为ture。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> showCount = <span class="number">0</span>;</span><br><span class="line">    EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"load"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">"Load fired"</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">    EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"pageshow"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        showCount++;</span><br><span class="line">        alert(<span class="string">"Show has been fired "</span> + showCount + <span class="string">" times. Persisted? "</span> + event.persisted);</span><br><span class="line">    &#125;);</span><br><span class="line">    EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"pagehide"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">"Hiding. Persisted? "</span> + event.persisted);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>
<ol start="6">
<li>hashchange事件</li>
</ol>
<p>用户URL的参数列表(以及URL中#后面的所有字符串)发生变化时作用。</p>
<p>此时的event包含两个对象：oldURL和newURL。这两个属性分别保存着参数列表前后变化的完整URL。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Click each of these links to change the URL hash.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#up"</span>&gt;</span>Up<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#down"</span>&gt;</span>Down<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This example only works in browsers that <span class="tag">&lt;<span class="name">code</span>&gt;</span>onhashchange<span class="tag">&lt;/<span class="name">code</span>&gt;</span>.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"hashchange"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">"Old URL: "</span> + event.oldURL + <span class="string">"\nNew URL: "</span> + event.newURL);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>为了保证兼容性，最好使用location对象来确定当前参数列表<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"hashchange"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">"CUrrent hash: "</span> + location.hash);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<h2 id="设备事件"><a href="#设备事件" class="headerlink" title="设备事件"></a>设备事件</h2><ol>
<li>orientationchange事件</li>
</ol>
<p>safari中</p>
<p>window.orientation属性中可能包含的值：0表示肖像模式，90表示左旋转（home键在右），-90则反之。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"load"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> div = <span class="built_in">document</span>.getElementById(<span class="string">"myDiv"</span>);</span><br><span class="line">    div.innerHTML = <span class="string">"Current orientation is "</span> + <span class="built_in">window</span>.orientation;</span><br><span class="line">    </span><br><span class="line">    EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"orientationchange"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        div.innerHTML = <span class="string">"Current orientation is "</span> + <span class="built_in">window</span>.orientation;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>MozOrientation事件</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This example only works in Firefox 3.6+ in devices such as Macbooks, Thinkpads, Windows Mobile, or Android.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"output"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"MozOrientation"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> output = <span class="built_in">document</span>.getElementById(<span class="string">"output"</span>);</span><br><span class="line">    output.innerHTML = <span class="string">"X="</span> + event.x + <span class="string">", Y="</span> + event.y + <span class="string">", Z="</span> + event.z + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>deviceorientation事件</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This example only works in Chrome in devices such as Macbooks, Thinkpads, or Android, or on Safari for iOS 4.2+.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"output"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"arrow"</span> <span class="attr">style</span>=<span class="string">"background:#000;width:3px;height:300px;margin:0 auto;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">EventUtil.addHandler(<span class="built_in">window</span>, <span class="string">"deviceorientation"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> output = <span class="built_in">document</span>.getElementById(<span class="string">"output"</span>);</span><br><span class="line">    <span class="keyword">var</span> arrow = <span class="built_in">document</span>.getElementById(<span class="string">"arrow"</span>);</span><br><span class="line">    arrow.style.webkitTransform = <span class="string">"rotate("</span> + <span class="built_in">Math</span>.round(event.alpha) + <span class="string">"deg)"</span>;</span><br><span class="line">    output.innerHTML = <span class="string">"Alpha="</span> + event.alpha + <span class="string">", Beta="</span> + event.beta + <span class="string">", Gamma="</span> + event.gamma + <span class="string">"&lt;br&gt;"</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="触摸与手势事件-p399"><a href="#触摸与手势事件-p399" class="headerlink" title="触摸与手势事件 p399"></a>触摸与手势事件 p399</h2><ol>
<li>触摸事件</li>
</ol>
<ul>
<li>touchstart</li>
<li>touchmove</li>
<li>touchend</li>
<li>touchcancel</li>
</ul>
<ol start="2">
<li>手势事件</li>
</ol>
<h1 id="内存和性能"><a href="#内存和性能" class="headerlink" title="内存和性能"></a>内存和性能</h1><h2 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托"></a>事件委托</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"myLinks"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"goSomewhere"</span>&gt;</span>Go somewhere<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"doSomething"</span>&gt;</span>Do something<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"sayHi"</span>&gt;</span>Say hi<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> list = <span class="built_in">document</span>.getElementById(<span class="string">"myLinks"</span>);</span><br><span class="line">    </span><br><span class="line">    EventUtil.addHandler(list, <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        event = EventUtil.getEvent(event);</span><br><span class="line">        <span class="keyword">var</span> target = EventUtil.getTarget(event);</span><br><span class="line">    </span><br><span class="line">        <span class="keyword">switch</span>(target.id)&#123;</span><br><span class="line">            <span class="keyword">case</span> <span class="string">"doSomething"</span>:</span><br><span class="line">                <span class="built_in">document</span>.title = <span class="string">"I changed the document's title"</span>;</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">    </span><br><span class="line">            <span class="keyword">case</span> <span class="string">"goSomewhere"</span>:</span><br><span class="line">                location.href = <span class="string">"http://www.wrox.com"</span>;</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">    </span><br><span class="line">            <span class="keyword">case</span> <span class="string">"sayHi"</span>:</span><br><span class="line">                alert(<span class="string">"hi"</span>);</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>
<p>我们使用事件委托只为ul元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的子节点，而且他们的事件会冒泡，所以单击事件最终会被这个函数处理。</p>
<p>如果可行的话，可以考虑为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。使用事件委托的好处：</p>
<ul>
<li>document对象很快就可以访问</li>
<li>在页面中设置事件处理程序所需时间更少。</li>
<li>整个页面占用的内存更少，能够提升整体性能。</li>
</ul>
<p>最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress</p>
<h2 id="移除事件处理程序"><a href="#移除事件处理程序" class="headerlink" title="移除事件处理程序"></a>移除事件处理程序</h2><p>如果带有事件处理程序的元素被innerHTML删除，那么原来添加到元素中的事件处理程序极有可能无法被当作垃圾回收。</p>
<h1 id="模拟事件"><a href="#模拟事件" class="headerlink" title="模拟事件"></a>模拟事件</h1><h2 id="DOM中的事件模拟"><a href="#DOM中的事件模拟" class="headerlink" title="DOM中的事件模拟"></a>DOM中的事件模拟</h2><p>在document对象上使用createEvent()方法创建event对象。这个方法接收一个参数，即表示要创建的事件类型的字符串。</p>
<p>创建了event对象后还需要使用与事件有关的信息对其进行初始化。最后一步是触发事件。使用dispatchEvent()方法。</p>
<ol>
<li>模拟鼠标事件 参数p406</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"Click me"</span> <span class="attr">id</span>=<span class="string">"myBtn"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"Send click to the other button"</span> <span class="attr">id</span>=<span class="string">"myBtn2"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This example works in DOM-compliant browsers (not IE).<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn"</span>);</span><br><span class="line">    <span class="keyword">var</span> btn2 = <span class="built_in">document</span>.getElementById(<span class="string">"myBtn2"</span>);</span><br><span class="line">    </span><br><span class="line">    EventUtil.addHandler(btn, <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">"Clicked!"</span>);</span><br><span class="line">        alert(event.screenX);   <span class="comment">//100</span></span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    EventUtil.addHandler(btn2, <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//create event object</span></span><br><span class="line">        <span class="keyword">var</span> event = <span class="built_in">document</span>.createEvent(<span class="string">"MouseEvents"</span>);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">//initialize the event object</span></span><br><span class="line">        event.initMouseEvent(<span class="string">"click"</span>, <span class="literal">true</span>, <span class="literal">true</span>, <span class="built_in">document</span>.defaultView, <span class="number">0</span>, <span class="number">100</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="literal">false</span>, </span><br><span class="line">                             <span class="literal">false</span>, <span class="literal">false</span>, <span class="literal">false</span>, <span class="number">0</span>, btn2);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">//fire the event</span></span><br><span class="line">        btn.dispatchEvent(event);</span><br><span class="line"></span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>
<ol start="2">
<li><p>模拟键盘事件 参数p407</p>
</li>
<li><p>模拟其他事件</p>
</li>
<li><p>自定义DOM事件</p>
</li>
</ol>
<h1 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h1><p>要尽量限制一个页面中事件处理程序的数量，数量太多会导致占用大量内存，而且也会有一定卡顿。建立在事件冒泡机制智商的事件委托技术，可以有效地减少事件处理程序的数量。在浏览器卸载页面之前最好可以移除页面中所有事件处理程序。</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/读书笔记/" rel="tag"># 读书笔记</a>
          
            <a href="/tags/js高程/" rel="tag"># js高程</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/08/15/300/" rel="next" title="js高程读书笔记 第十二章 DOM2和DOM3">
                <i class="fa fa-chevron-left"></i> js高程读书笔记 第十二章 DOM2和DOM3
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/09/02/303/" rel="prev" title="js高程读书笔记 第17章 错误处理与调试">
                js高程读书笔记 第17章 错误处理与调试 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/avatar.jpg" alt="何米酥">
            
              <p class="site-author-name" itemprop="name">何米酥</p>
              <p class="site-description motion-element" itemprop="description">Just do...</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">202</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">8</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">78</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/hemisu" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.zhihu.com/people/hemisu" target="_blank" title="知乎">
                      
                        <i class="fa fa-fw fa-globe"></i>知乎</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#本章内容"><span class="nav-number">1.</span> <span class="nav-text">本章内容</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#事件流"><span class="nav-number">2.</span> <span class="nav-text">事件流</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#事件冒泡"><span class="nav-number">2.1.</span> <span class="nav-text">事件冒泡</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件捕获"><span class="nav-number">2.2.</span> <span class="nav-text">事件捕获</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM事件流"><span class="nav-number">2.3.</span> <span class="nav-text">DOM事件流</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#事件处理程序"><span class="nav-number">3.</span> <span class="nav-text">事件处理程序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML事件处理程序"><span class="nav-number">3.1.</span> <span class="nav-text">HTML事件处理程序</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM0级事件处理程序"><span class="nav-number">3.2.</span> <span class="nav-text">DOM0级事件处理程序</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM2级事件处理程序"><span class="nav-number">3.3.</span> <span class="nav-text">DOM2级事件处理程序</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#IE事件处理程序"><span class="nav-number">3.4.</span> <span class="nav-text">IE事件处理程序</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨浏览器的事件处理程序"><span class="nav-number">3.5.</span> <span class="nav-text">跨浏览器的事件处理程序</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#事件对象"><span class="nav-number">4.</span> <span class="nav-text">事件对象</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#IE中的事件对象"><span class="nav-number">4.1.</span> <span class="nav-text">IE中的事件对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨浏览器的事件对象"><span class="nav-number">4.2.</span> <span class="nav-text">跨浏览器的事件对象</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#事件类型"><span class="nav-number">5.</span> <span class="nav-text">事件类型</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#UI事件"><span class="nav-number">5.1.</span> <span class="nav-text">UI事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#焦点事件"><span class="nav-number">5.2.</span> <span class="nav-text">焦点事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#鼠标与滚轮事件"><span class="nav-number">5.3.</span> <span class="nav-text">鼠标与滚轮事件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#客户区坐标位置"><span class="nav-number">5.3.1.</span> <span class="nav-text">客户区坐标位置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#页面坐标位置"><span class="nav-number">5.3.2.</span> <span class="nav-text">页面坐标位置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#屏幕坐标位置"><span class="nav-number">5.3.3.</span> <span class="nav-text">屏幕坐标位置</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#修改键"><span class="nav-number">5.4.</span> <span class="nav-text">修改键</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#相关元素"><span class="nav-number">5.4.1.</span> <span class="nav-text">相关元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#鼠标按钮"><span class="nav-number">5.4.2.</span> <span class="nav-text">鼠标按钮</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#更多的事件信息"><span class="nav-number">5.4.3.</span> <span class="nav-text">更多的事件信息</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#鼠标滚轮事件"><span class="nav-number">5.4.4.</span> <span class="nav-text">鼠标滚轮事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#触摸设备"><span class="nav-number">5.4.5.</span> <span class="nav-text">触摸设备</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#键盘与文本事件"><span class="nav-number">5.5.</span> <span class="nav-text">键盘与文本事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#复合事件"><span class="nav-number">5.6.</span> <span class="nav-text">复合事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#变动事件"><span class="nav-number">5.7.</span> <span class="nav-text">变动事件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#删除节点"><span class="nav-number">5.7.1.</span> <span class="nav-text">删除节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#插入节点"><span class="nav-number">5.7.2.</span> <span class="nav-text">插入节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML5事件"><span class="nav-number">5.7.3.</span> <span class="nav-text">HTML5事件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#设备事件"><span class="nav-number">5.8.</span> <span class="nav-text">设备事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#触摸与手势事件-p399"><span class="nav-number">5.9.</span> <span class="nav-text">触摸与手势事件 p399</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#内存和性能"><span class="nav-number">6.</span> <span class="nav-text">内存和性能</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#事件委托"><span class="nav-number">6.1.</span> <span class="nav-text">事件委托</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#移除事件处理程序"><span class="nav-number">6.2.</span> <span class="nav-text">移除事件处理程序</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#模拟事件"><span class="nav-number">7.</span> <span class="nav-text">模拟事件</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM中的事件模拟"><span class="nav-number">7.1.</span> <span class="nav-text">DOM中的事件模拟</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#小结"><span class="nav-number">8.</span> <span class="nav-text">小结</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
            <span id="scrollpercent"><span>0</span>%</span>
          
        </div>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2015 &mdash; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">何米酥</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.4</div>




        







        
      </div>
    </footer>

    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
